 <template>
    <div class="page-loadmore">
        <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :autoFill="false"  ref="loadmore">
            <slot></slot>
            <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
            <span v-show="topStatus === 'loading'">
                <span v-show="topStatus === 'drop'">释放更新</span>
                <mt-spinner type="snake" :size="18"></mt-spinner>
            </span>
            </div>
            <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
            <span v-show="bottomStatus === 'loading'">
                <mt-spinner type="snake" :size="18"></mt-spinner>
            </span>
            </div>
        </mt-loadmore>
        </div>
    </div>
    </template>

  <style scoped>
    .loading-background, .mint-loadmore-top span {
        -webkit-transition: .2s linear;
        transition: .2s linear
    }
    .mint-loadmore-top span {
        display: inline-block;
        vertical-align: middle
    }

    .mint-loadmore-top span.is-rotate {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .page-loadmore .mint-spinner {
        display: inline-block;
        vertical-align: middle
    }

    .page-loadmore-desc {
        text-align: center;
        color: #666;
        padding-bottom: 5px
    }

    .page-loadmore-desc:last-of-type,
    .page-loadmore-listitem {
        border-bottom: 1px solid #eee
    }

    .page-loadmore-listitem {
        height: 32px;
        line-height: 32px;
        text-align: center
    }

    .page-loadmore-listitem:first-child {
        border-top: 1px solid #eee
    }

    .page-loadmore-wrapper {
        overflow: scroll
    }

    .mint-loadmore-bottom span {
        display: inline-block;
        -webkit-transition: .2s linear;
        transition: .2s linear;
        vertical-align: middle
    }

    .mint-loadmore-bottom span.is-rotate {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    </style>

    <script type="text/babel">
    import Vue from 'vue';
    import { Loadmore,Spinner  } from 'mint-ui';
    Vue.component(Loadmore.name, Loadmore);
    Vue.component(Spinner.name, Spinner);
    export default {
        props:{
            loadTop:{
                type: Function,
                default: null
            },
            loadBottom:{
                type: Function,
                default: null
            },
            allLoaded:{
                type: Boolean,
                default: false
            }
        },
        name:"loadMore",
        data() {
            return {
                    list: [],
                    bottomStatus: '',
                    wrapperHeight: 0,
                    topStatus: '',
                    //wrapperHeight: 0,
                    translate: 0,
                    moveTranslate: 0
                };
        },

        methods: {
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
            //上拉加载更多
            // loadBottom() {
        //        setTimeout(() => {
        //          let lastValue = this.list[this.list.length - 1];
        //          if (lastValue < 40) {
        //            for (let i = 1; i <= 10; i++) {
        //              this.list.push(lastValue + i);
        //            }
        //          } else {
        //            this.allLoaded = true;
        //          }
        //          this.$refs.loadmore.onBottomLoaded();
        //        }, 1500);
            //     this.$emit("loadBottom");
            // },

            handleTopChange(status) {
                this.moveTranslate = 1;
                this.topStatus = status;
            },
            onTopLoaded() {
                this.$refs.loadmore.onTopLoaded();
            },
            onBottomLoaded() {
                this.$refs.loadmore.onBottomLoaded();
            },
            setAllLoaded(val){
                this.allLoaded = val;
            },
            translateChange(translate) {
                const translateNum = +translate;
                this.translate = translateNum.toFixed(2);
                this.moveTranslate = (1 + translateNum / 70).toFixed(2);
            },
           /*  loadTop() {
                setTimeout(() => {
                  let firstValue = this.list[0];
                  for (let i = 1; i <= 10; i++) {
                    this.list.unshift(firstValue - i);
                  }
                  this.$refs.loadmore.onTopLoaded();
                }, 1500);
                 this.$emit("loadTop");
             },*/

        },

        created() {
    //      for (let i = 1; i <= 20; i++) {
    //        this.list.push(i);
    //      }
        },

        mounted() {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    };
    </script>